import React, { type ReactElement } from 'react'
import { type AnimatedProp, memo, Animated, cx } from '@arwes/react'
import { animate, stagger } from 'motion'

interface ArwesLogoTypeProps {
  className?: string
  animated?: AnimatedProp
}

const ArwesLogoType = memo((props: ArwesLogoTypeProps): ReactElement => {
  const { className, animated } = props
  return (
    <Animated<SVGSVGElement>
      as="svg"
      className={cx('select-none', className)}
      style={{
        filter: 'drop-shadow(0 0 8px hsla(180, 100%, 70%, 0.5))'
      }}
      viewBox="0 0 2200 400"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      animated={[
        {
          transitions: {
            entering: ({ $, duration }) => {
              const [A, R, W, E, S] = $('g')
              return animate(
                [A, W, S, R, E],
                { opacity: [0, 1, 0.5, 1] },
                { duration, delay: stagger(0.02) }
              )
            },
            exiting: {
              opacity: [1, 0, 0.5, 0]
            }
          }
        },
        ...(Array.isArray(animated) ? animated : [animated])
      ]}
    >
      <g>
        <path
          d="M365.182 397.87L226.204 108.925L114.922 338.641H295.036L325.358 397.87H3.33545L199.622 2.02844H252.484L448.77 397.87H365.182Z"
          fill="#00FFFF"
        />
        <path
          d="M251.17 4.0568L445.435 395.842H366.395L229.742 111.866L226.103 104.361L222.465 111.866L114.517 334.888L111.687 340.669H118.156H293.823L322.124 395.74H6.56983L200.835 4.0568H251.17ZM253.697 0H198.308L0 399.899H328.694L296.249 336.714H118.156L226.204 113.692L363.969 400H452.106L253.697 0Z"
          fill="#66FFFF"
        />
      </g>
      <g>
        <path
          d="M786.763 397.87L669.011 261.156L663.755 254.97H567.634L598.36 193.103H746.333C759.877 193.103 772.208 187.627 782.922 176.876C795.758 163.996 802.328 147.769 802.328 128.6C802.328 109.331 795.758 93.0021 782.922 80.1217C772.208 69.3712 759.877 63.8946 746.333 63.8946H562.074V397.769H484.045V2.02844H746.333C784.64 2.02844 817.489 15.4159 843.971 41.9879C868.229 66.3286 880.459 95.4361 880.459 128.702C880.459 161.765 868.128 190.872 843.971 215.112C821.532 237.627 793.838 250.811 761.696 254.26L757.855 254.665L881.065 397.972H786.763V397.87Z"
          fill="#00FFFF"
        />
        <path
          d="M746.333 4.0568C765.234 4.0568 782.922 7.40365 798.892 13.8945C814.861 20.3854 829.517 30.3245 842.455 43.4077C854.381 55.3753 863.478 68.6613 869.442 82.7586C875.405 96.856 878.437 112.373 878.437 128.702C878.437 144.929 875.405 160.345 869.442 174.442C863.478 188.54 854.381 201.724 842.455 213.692C820.319 235.903 793.029 248.884 761.393 252.231L753.711 253.043L758.765 258.925L876.618 395.842H787.773L670.628 259.838L665.979 254.361L664.766 252.941H662.947H570.969L599.674 195.132H746.333C760.483 195.132 773.32 189.452 784.337 178.296C797.578 165.01 804.35 148.276 804.35 128.6C804.35 108.824 797.578 91.9878 784.337 78.7018C773.219 67.5456 760.483 61.8661 746.333 61.8661H564.096H560.053V65.9229V395.74H486.066V4.0568H746.333ZM746.333 0H482.023V399.899H564.096V65.9229H746.333C759.473 65.9229 771.197 71.0953 781.507 81.5416C794.04 94.1176 800.307 109.838 800.307 128.6C800.307 147.262 794.04 162.779 781.507 175.355C771.096 185.801 759.372 190.974 746.333 190.974H597.147L564.399 256.897H662.846L667.495 262.373L785.853 399.797H885.411L761.797 256.085C794.545 252.637 822.341 239.351 845.285 216.43C870.048 191.582 882.379 162.373 882.379 128.6C882.379 94.6247 870.048 65.3144 845.285 40.4665C818.399 13.4888 785.449 0 746.333 0Z"
          fill="#66FFFF"
        />
      </g>
      <g>
        <path
          d="M1236.95 397.87L1183.78 202.84L1215.92 84.8885L1265.05 239.047L1347.83 2.02844H1432.73L1298.81 397.87H1236.95ZM1039.95 397.87L904.919 2.02844H984.363L1068.36 239.25L1135.97 2.02844H1210.87L1101.81 397.87H1039.95Z"
          fill="#00FFFF"
        />
        <path
          d="M1430 4.0568L1297.49 395.842H1238.46L1185.91 202.738L1216.13 91.8864L1261.31 233.773L1264.95 245.335L1268.89 233.874L1349.24 3.95538H1430M1208.24 4.0568L1100.3 395.842H1041.37L907.749 4.0568H982.948L1064.41 233.976L1068.66 245.943L1072.1 233.773L1137.59 4.0568H1208.24ZM1435.66 0H1346.51L1265.25 232.657L1215.92 77.789L1181.86 202.84L1235.63 399.899H1300.52L1435.66 0ZM1213.6 0H1134.46L1068.15 232.657L985.778 0H901.988L1038.34 399.899H1103.23L1213.6 0Z"
          fill="#66FFFF"
        />
      </g>
      <g>
        <path
          d="M1557.86 397.87L1589.09 336.004H1811.76L1786.19 397.87H1557.86ZM1467.7 397.87V2.02844H1814.49L1788.92 63.8946H1545.73V397.769H1467.7V397.87ZM1557.86 230.832L1589.09 168.966H1811.76L1786.19 230.832H1557.86Z"
          fill="#00FFFF"
        />
        <path
          d="M1811.45 4.0568L1787.5 61.8661H1547.75H1543.71V65.9229V395.74H1469.72V4.0568H1811.45ZM1808.73 170.994L1784.77 228.803H1561.09L1590.3 170.994H1808.73ZM1808.73 337.931L1784.77 395.74H1561.09L1590.3 337.931H1808.73ZM1817.52 0H1465.68V399.899H1547.75V65.9229H1790.23L1817.52 0ZM1814.79 166.937H1587.88L1554.62 232.86H1787.6L1814.79 166.937ZM1814.79 333.874H1587.88L1554.62 399.797H1787.6L1814.79 333.874Z"
          fill="#66FFFF"
        />
      </g>
      <g>
        <path
          d="M1833.69 397.87L1859.26 336.004H2066.26C2078.59 336.004 2088.6 333.367 2095.78 328.195C2104.47 322.414 2109.02 311.46 2109.22 295.639C2109.62 273.124 2099.01 256.998 2077.79 247.465C2060.6 239.554 2033.11 232.556 1996.12 226.471C1959.43 220.487 1928.6 211.562 1904.34 199.797C1884.43 190.365 1869.27 177.789 1859.26 162.678C1849.26 147.566 1844.2 129.209 1844.1 108.316C1844.1 76.2678 1856.53 49.8986 1880.99 30.0203C1903.84 11.4605 1932.14 2.02844 1965.09 2.02844H2170.47L2144.9 63.8946H1970.55C1957.51 63.8946 1946.89 68.0528 1939.11 76.2678C1931.33 84.28 1927.39 95.0305 1927.39 108.316C1927.39 127.586 1941.44 142.495 1969.13 152.637H1969.23H1969.33C1985.51 156.795 2010.07 161.562 2042.21 166.633C2074.15 171.704 2102.75 179.817 2127.21 190.872C2151.06 201.623 2169.16 215.923 2180.88 233.367C2192.61 250.811 2198.37 272.008 2197.96 296.248C2197.46 330.02 2184.42 356.187 2159.25 374.037C2136.61 389.757 2109.02 397.769 2077.18 397.769H1833.69V397.87Z"
          fill="#00FFFF"
        />
        <path
          d="M2167.44 4.0568L2143.48 61.8661H1970.55C1956.9 61.8661 1945.78 66.2272 1937.7 74.8479C1929.51 83.2657 1925.37 94.5233 1925.37 108.316C1925.37 128.499 1939.82 144.118 1968.42 154.564L1968.63 154.665H1968.83C1985.1 158.925 2009.66 163.59 2041.9 168.661C2073.64 173.732 2102.14 181.744 2126.4 192.698C2149.95 203.245 2167.74 217.343 2179.26 234.483C2190.79 251.623 2196.35 272.312 2196.04 296.247C2195.74 312.88 2192.51 327.688 2186.14 340.365C2179.87 352.941 2170.47 363.692 2158.24 372.414C2135.9 387.931 2108.71 395.74 2077.38 395.74H1836.82L1860.78 337.931H2066.26C2079 337.931 2089.31 335.193 2096.89 329.817C2106.19 323.529 2110.94 312.069 2111.14 295.639C2111.54 272.211 2100.53 255.375 2078.49 245.639C2061.11 237.627 2033.52 230.527 1996.32 224.544C1959.83 218.661 1929.21 209.736 1905.05 198.073C1885.44 188.742 1870.58 176.572 1860.78 161.663C1851.08 146.856 1846.02 128.905 1845.92 108.418C1845.92 92.6978 1848.95 78.2962 1854.92 65.5172C1860.88 52.8398 1869.98 41.3793 1882 31.643C1904.44 13.3874 1932.34 4.0568 1964.78 4.0568H2167.44ZM2173.5 0H1965.09C1931.43 0 1903.03 9.53347 1879.68 28.499C1854.61 48.9858 1842.08 75.5578 1842.08 108.418C1842.28 151.318 1862.7 182.454 1903.43 201.724C1927.99 213.59 1958.72 222.515 1995.81 228.499C2032.81 234.483 2059.9 241.481 2076.98 249.29C2097.5 258.418 2107.6 273.834 2107.3 295.538C2107.1 310.649 2102.95 320.994 2094.77 326.471C2087.89 331.44 2078.39 333.874 2066.36 333.874H1857.95L1830.66 399.797H2077.28C2109.62 399.797 2137.42 391.785 2160.46 375.761C2186.24 357.505 2199.48 331.034 2199.98 296.349C2200.69 246.755 2176.74 210.953 2128.02 189.047C2103.26 177.89 2074.75 169.777 2042.51 164.706C2010.27 159.635 1986.01 154.97 1969.84 150.71C1942.95 140.872 1929.51 126.673 1929.51 108.316C1929.51 95.5375 1933.25 85.2941 1940.73 77.6876C1948.21 69.8783 1958.21 65.9229 1970.75 65.9229H2146.42L2173.5 0Z"
          fill="#66FFFF"
        />
      </g>
    </Animated>
  )
})

export { ArwesLogoType }
